<!doctype html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<title>编辑管理员</title>
<link rel="stylesheet" href="./asset/css/components.css" />
<link rel="stylesheet" href="./asset/css/bootstrap.css" />
<link rel="stylesheet" href="./asset/css/plugins.css" />
<link rel="stylesheet" href="./asset/css/main.css" />
<link rel="stylesheet" href="./asset/css/themes.css" />
</head>

<body>
	<div id="body">
		<div id="app">
			<div class="tabbody">
				<div class="bodyli active">
					<div class="inputbox">
						<span class="title">用户名</span>
						<div class="inputright">
							<input type="text" id="username" v-model="username"
								class="form-control input-sm" placeholder="请输入用户名">
						</div>
					</div>
					<div class="inputbox">
						<span class="title">姓名</span>
						<div class="inputright">
							<input type="text" id="realname" v-model="realname"
								class="form-control input-sm" placeholder="请输入姓名">
						</div>
					</div>
					<div class="inputbox">
						<span class="title">联系方式</span>
						<div class="inputright">
							<input type="text" id="contact" v-model="contact"
								class="form-control input-sm" placeholder="请输入联系方式">
						</div>
					</div>
					<div class="tbfooter">
						<button class="btn btn-success" @click.prevent="update()">
							<i class="fa fa-floppy-o"></i> 提交保存
						</button>
						&nbsp;&nbsp;&nbsp;
						<button class="btn btn-default" @click.prevent="reset()">
							<i class="fa fa-recycle"></i> 取消重置
						</button>
					</div>
				</div>
			</div>

			<script type="text/javascript" src="./asset/js/jquery.min.js"></script>
			<script type="text/javascript" src="./asset/js/bootstrap.min.js"></script>
			<script type="text/javascript" src="./asset/js/axios.min.js"></script>
			<script type="text/javascript" src="./asset/js/vue.js"></script>
			<script type="text/javascript">
		const vue = new Vue({
			el: '#app',// 绑定作用域
			data: { //定义数据用于vue的双向绑定
				adminid: '',
				username: '', // 用户名
				password: '', // 密码
				realname: '', // 姓名
				contact: '', // 联系方式
			},
			methods: {
				getUrlParam: function () {
					var name, value;
					var str = location.href; // 取得整个地址栏
					var num = str.indexOf("?"); // 定位参数起始位置
					str = str.substr(num + 1); // 取得所有参数 
					var arr = str.split("&"); // 各个参数放到数组里
					for (var i = 0; i < arr.length; i++) {
						num = arr[i].indexOf("=");
						if (num > 0) {
							name = arr[i].substring(0, num);
							value = arr[i].substr(num + 1);
							this.adminid = value; // 确认主键参数
						}
					}
				},
				loadPage: function () {
					let _this = this;
					axios.get('http://127.0.0.1:8080/equipment/admin/getAdminById.action?id=' + _this.adminid).then(result => {
						_this.username= result.data.username;
						_this.password= result.data.password;
						_this.realname= result.data.realname;
						_this.contact= result.data.contact;
					});
				},
				reset: function () {
					this.loadPage();
				},
				update: function () {
					let _this = this;
					var data = {
						adminid: _this.adminid,
						username: _this.username,
						password: _this.password,
						realname: _this.realname,
						contact: _this.contact,
					};
					axios.post('http://127.0.0.1:8080/equipment/admin/updateAdmin.action', data).then(result => {
						if (result.data.code > 0) {
							var index = parent.layer.getFrameIndex(window.name);
							parent.location.reload();
							parent.layer.close(index);
						} else {
							alert('修改失败');
						}
					});
				},
			},

			created() { // 生命周期相关的函数
				this.getUrlParam();
				this.loadPage();
				let _this = this;
			},
		})
	</script>
</body>

</html>


